"use client";
import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import AccountCircle from "@mui/icons-material/AccountCircle";
import MenuItem from "@mui/material/MenuItem";
import Menu from "@mui/material/Menu";
import Drawer from "@mui/material/Drawer";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import MailIcon from "@mui/icons-material/Mail";
import ListItemText from "@mui/material/ListItemText";
import Link from "next/link";
import Divider from "@mui/material/Divider";

export default function MenuAppBar() {
  const auth = true;
  const [anchorEl, setAnchorEl] = React.useState(null);
  const urls = [
    {
      name: "基础信息",
      path: "/basic",
      childen: [
        {
          name: "员工",
          path: "/staff",
        },
        {
          name: "物料",
          path: "/material",
        },
        {
          name: "设备",
          path: "/equipment",
        },
        {
          name: "工位",
          path: "/workstation",
        },
        {
          name: "PAD",
          path: "/pad",
        },
      ],
    },{

      name: "生产管理",
      path: "/industry",
      childen: [
        {
          name: "收料管理",
          path: "/receive",
        },
        {
          name: "收料信息",
          path: "/receiveDetail",
        },
        {
          name: "物料详细",
          path: "/detail",
        },
        {
            name: "外层明细",
            path: "/outer",
        }
      ],
    }
  ];

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const [state, setState] = React.useState({
    left: false,
  });

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  const list = (anchor) => (
    <Box
      sx={{ width: anchor === "top" || anchor === "bottom" ? "auto" : 250 }}
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
        {urls.map((item, index) => {
          return (
            <div key={index}>
              <ListItemButton>
                <ListItemText primary={item.name} />
              </ListItemButton>
              {item.childen && item.childen.length > 0 ? (
                <List>
                  {item.childen.map((child, index) => {
                    return <Link href={item.path + child.path}>
                      <ListItemButton key={index}>
                        <ListItemText primary={child.name} />
                      </ListItemButton>
                    </Link>;
                  })}
                </List>
              ) : null}
                <Divider /> 
            </div>
          );
        }, urls)}
      </List>
    </Box>
  );
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
            onClick={toggleDrawer("left", true)}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            <Link href={"/"}>Mes System</Link>
          </Typography>
          {auth && (
            <div>
              <IconButton
                size="large"
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: "top",
                  horizontal: "right",
                }}
                keepMounted
                transformOrigin={{
                  vertical: "top",
                  horizontal: "right",
                }}
                open={Boolean(anchorEl)}
                onClose={handleClose}
              >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
              </Menu>
            </div>
          )}
        </Toolbar>
      </AppBar>
      <Drawer
        anchor={"left"}
        open={state["left"]}
        onClose={toggleDrawer("left", false)}
      >
        {list("left")}
      </Drawer>
    </Box>
  );
}
